<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件的委派</title>
    <style>

    </style>
</head>
<body>
    <button id="btn01">添加超链接</button>
    <ul id="u1">
        <li><p class="link">我是PPPPPP</p></li>
        <li><a href="JavaScript" class="link">超链接一</a></li>
        <li><a href="JavaScript" class="link">超链接二</a></li>
        <li><a href="JavaScript" class="link">超链接三</a></li>
    </ul>
</body>
</html>
<script>
    /*
        为每一个超链接都绑定单击响应函数 
        - 这里我们为每一个超链接都绑定了一个单击响应函数，这种操作比较麻烦，
            而且这些操作只能为已有的超链接设置事件，而新添加的超链接必须重新绑定
    */

    // 获取所有的 a
    var allA = document.getElementsByTagName("a");
    // for(var i=0; i<allA.length;i++){
    //     allA[i].onclick = function(){
    //         return false;
    //     };
    // }
    
    // 获取 ul
    var ul = document.getElementById("u1");
    // 获取 id为 btn01
    var btn01 = document.getElementById("btn01");
    btn01.onclick=function(){
        // 创建一个 li
        var li = document.createElement("li");
        li.innerHTML="<a href='javascript' class='link'>超链接</a>";
        
        ul.appendChild(li);
    };

    /*
        我们希望，只绑定一次事件，即可应用到多个的元素上，即使元素是后添加的
        - 我们可以尝试将其绑定给元素的共同的祖先元素

        事件的委派 ⭐📌
            - 指将事件统一绑定给元素的共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素
                从而通过祖先的响应函数来处理事件
            - 事件委派是利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能
    */
    ul.onclick=function(event){
        event = event || window.event;

        /*
            target ⭐⭐📌
                - event 中的 target 表示的触发事件的对象

        */
        // alert(event.target.className);
        if(event.target.className == "link"){
            alert(event.target);
        }
        return false;
    };
    

</script>